What is CSS Viewport Units: vh, vw, vmin, and vmax
What is CSS Viewport Units: vh, vw, vmin, and vmax
1045
22-Oct-2024
Updated on 20-Nov-2024
Ravi Vishwakarma
08-Nov-2024CSS viewport units (vh, vw, vmin, and vmax) are a set of relative units used in CSS for responsive design. They allow elements to scale relative to the viewport size, adapting layout and design more fluidly on different screen sizes and orientations.
Viewport Units:
1. vh (Viewport Height):
1 vh is equal to 1% of the viewport's height.
For example, if the viewport height is 800px, then 1 vh = 8px.
Usage: height: 50vh; would make an element 50% of the viewport's height.
2. vw (Viewport Width):
1 vw is equal to 1% of the viewport's width.
For example, if the viewport width is 1200px, then 1 vw = 12px.
Usage: width: 100vw; would make an element fill 100% of the viewport's width.
3. vmin (Viewport Minimum):
vmin is equal to the smaller value of either vh or vw.
Useful for making elements adapt to the smallest side of the viewport.
Usage: font-size: 5vmin; would make the font size adjust to the smaller of the viewport width or height.
4. vmax (Viewport Maximum):
vmax is equal to the larger value of either vh or vw.
Useful for elements that should adapt to the largest side of the viewport.
Usage: padding: 2vmax; would make the padding adjust to the larger dimension of the viewport.
Examples:
To make an element take up the entire viewport:
.full-screen {
width: 100vw;
height: 100vh;
}
To make text responsive to viewport size:
.responsive-text {
font-size: 5vmin; /* Scales with the smaller viewport side */
}
These units are especially helpful in responsive design, as they allow designs to scale dynamically across a wide range of screen sizes without relying on media queries.